<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
    <navigation></navigation>
    <div class="min-h-screen bg-gray-100">
        <div class="bg-blue-500 text-white py-8 text-center">
            <div class="flex justify-center items-center mb-4">
                <div class="rounded-full bg-white w-24 h-24 flex items-center justify-center">
                    <span class="text-blue-500 text-2xl font-bold">签到</span>
                </div>
            </div>
            <p class="text-xl">连续打卡 {{ consecutiveDays }} 天</p>
        </div>

        <div class="max-w-2xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden my-8">
            <div class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <button @click="changeMonth(-1)" class="text-gray-600 hover:text-gray-800">
                        <el-icon><ArrowLeft /></el-icon>
                    </button>
                    <h2 class="text-xl font-bold">{{ currentYear }}年{{ currentMonth }}月</h2>
                    <button @click="changeMonth(1)" class="text-gray-600 hover:text-gray-800">
                        <el-icon><ArrowRight /></el-icon>
                    </button>
                </div>
                <div class="grid grid-cols-7 gap-2 text-center">
                    <div v-for="day in weekDays" :key="day" class="font-medium text-gray-500">{{ day }}</div>
                    <div v-for="day in calendarDays" :key="day.date"
                         class="p-2 relative"
                         :class="{'bg-blue-100 rounded-full': isToday(day.date)}">
                        <span :class="{'text-gray-400': !day.isCurrentMonth}">{{ day.date.getDate() }}</span>
                        <div v-if="isCheckedIn(day.date)" class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-blue-500 rounded-full"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-center mb-8">
            <button @click="checkIn"
                    class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105 !rounded-button whitespace-nowrap">
                {{ isCheckedInToday ? '今日已签到' : '立即签到' }}
            </button>
        </div>

        <p class="text-center text-gray-600">{{ message }}</p>
    </div>
</template>

<script lang="ts" setup>
    import { ref, computed, onMounted } from 'vue';
    import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
    import navigation from '../../views/navigation.vue'
    const currentDate = ref(new Date());
    const checkedInDates = ref<Date[]>([]);
    const consecutiveDays = ref(0);
    const message = ref('今天还没有签到哦，快来打卡吧！');

    const weekDays = ['日', '一', '二', '三', '四', '五', '六'];

    const currentYear = computed(() => currentDate.value.getFullYear());
    const currentMonth = computed(() => currentDate.value.getMonth() + 1);

    const calendarDays = computed(() => {
        const year = currentDate.value.getFullYear();
        const month = currentDate.value.getMonth();
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);

        const days = [];
        const prevMonthDays = firstDay.getDay();
        const nextMonthDays = 6 - lastDay.getDay();

        // Previous month days
        for (let i = prevMonthDays; i > 0; i--) {
            const date = new Date(year, month, -i + 1);
            days.push({ date, isCurrentMonth: false });
        }

        // Current month days
        for (let i = 1; i <= lastDay.getDate(); i++) {
            const date = new Date(year, month, i);
            days.push({ date, isCurrentMonth: true });
        }

        // Next month days
        for (let i = 1; i <= nextMonthDays; i++) {
            const date = new Date(year, month + 1, i);
            days.push({ date, isCurrentMonth: false });
        }

        return days;
    });

    const isCheckedInToday = computed(() => {
        const today = new Date();
        return checkedInDates.value.some(date =>
            date.getDate() === today.getDate() &&
            date.getMonth() === today.getMonth() &&
            date.getFullYear() === today.getFullYear()
        );
    });

    function changeMonth(delta: number) {
        currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + delta, 1);
    }

    function isToday(date: Date) {
        const today = new Date();
        return date.getDate() === today.getDate() &&
            date.getMonth() === today.getMonth() &&
            date.getFullYear() === today.getFullYear();
    }

    function isCheckedIn(date: Date) {
        return checkedInDates.value.some(checkedDate =>
            checkedDate.getDate() === date.getDate() &&
            checkedDate.getMonth() === date.getMonth() &&
            checkedDate.getFullYear() === date.getFullYear()
        );
    }

    function checkIn() {
        if (!isCheckedInToday.value) {
            const today = new Date();
            checkedInDates.value.push(today);
            updateConsecutiveDays();
            message.value = '签到成功！今天也要元气满满哦！';
        } else {
            message.value = '今天已经签到过啦，明天再来哦！';
        }
    }

    function updateConsecutiveDays() {
        const sortedDates = [...checkedInDates.value].sort((a, b) => b.getTime() - a.getTime());
        let count = 1;
        for (let i = 1; i < sortedDates.length; i++) {
            const diff = sortedDates[i - 1].getTime() - sortedDates[i].getTime();
            if (diff <= 86400000) { // 24 hours in milliseconds
                count++;
            } else {
                break;
            }
        }
        consecutiveDays.value = count;
    }

    onMounted(() => {
        // 模拟一些历史签到数据
        const today = new Date();
        for (let i = 1; i <= 5; i++) {
            const date = new Date(today);
            date.setDate(date.getDate() - i);
            checkedInDates.value.push(date);
        }
        updateConsecutiveDays();
    });
</script>

<style scoped>
    /* 自定义样式 */
    .calendar-day {
        @apply w-10 h-10 flex items-center justify-center rounded-full transition-colors duration-200 ease-in-out;
    }

    .calendar-day:hover {
        @apply bg-blue-100;
    }

    .calendar-day.checked {
        @apply bg-blue-500 text-white;
    }
</style>

